require('./list.css');
import {
    getOrderList
} from './ajax';


$(function () {

    $.init();
    let loading = false;

    //tab标签
    $('.list-tab').click(function () {

        if ($('.infinite-scroll-preloader').length <= 0) {
            $('.content').append(renderLoading());
            $.attachInfiniteScroll($('.infinite-scroll'));
        }
        loading = true;
        $('.infinite-scroll-preloader').show();
        $(this).addClass('active').siblings().removeClass('active');
        let status = $(this).data('status');
        getOrderList(status, 0, (res) => {
            loading = false;
            $('.infinite-scroll-preloader').hide();
            $(this).data('page', 1);
            $('.list-container').html(renderListItem(res));
        });
    });

    $('.list-tab').eq(0).trigger('click');



    $(document).on('infinite', '.infinite-scroll-bottom', function () {
        // 如果正在加载，则退出
        if (loading) return;
        // 设置flag
        loading = true;
        $('.infinite-scroll-preloader').show();
        let activeTab = $('.list-tab-box .active');
        let status = activeTab.data('status');
        let page = activeTab.data('page');
        getOrderList(status, page, (res) => {
            loading = false;
            $('.infinite-scroll-preloader').hide();
            if (res.length <= 0) {
                $.detachInfiniteScroll($('.infinite-scroll'));
                // 删除加载提示符
                $('.infinite-scroll-preloader').remove();
                return;
            }
            activeTab.data('page', page + 1);
            $('.list-container').append(renderListItem(res));
        });

    });

});


const renderListItem = (data) => {

    let markup = $.map(data, function (val) {

        let order_status_text;
        switch (parseInt(val.order_status)) {
            case 0:
                order_status_text = `待审核`;
                break;
            case 1:
                order_status_text = `上级已审核`;
                break;
            case 2:
                order_status_text = `总代已审核`;
                break;
            case 3:
                order_status_text = `已发货`;
                break;
            case 4:
                order_status_text = `已完成`;
                break;
            default:
                 order_status_text = `待审核`;
                break;
        }

        let item = `
         <li class="order-list">
                <div class="desc add-arrow">
                 <a href=${_orderDetailUrl}?orderid=${val.order_id}  >
                    <div class="order-sn">订单号：<span>${val.order_sn}</span></div>
                    <div class="order-sn">订单状态：<span>${order_status_text}</span></div>
                    <div class="order-sn">订单总金额：<span>${val.goods_amount}</span></div>
                    <div class="order-sn">下单时间：<span>${val.add_time}</span></div>
                    ${val.order_status<2 ? '' : `<a class="external" href="//m.kuaidi100.com/result.jsp?nu=${val.delivery_sn}">查看物流</a>` }
                 </a>
                </div>
       </li>
    `;

        return item;

    });


    return markup.join('');
};

const renderLoading = () => {
    return `
    <div class="infinite-scroll-preloader">
        <div class="preloader"></div>
    </div>
    `;
}